<template>
  <transition name="fade"
    ><div class="tm-dialog_wrapper" v-show="visible" @click.self="handerClose">
      <div
        class="tm-dialog"
        :style="{
          width: width,
          top: top,
          transform: `translate(-50%,-${top1})`,
        }"
      >
        <div class="tm-dialog_header">
          <span class="tm_title">{{ title }}</span>
          <span class="tm_close" @click="handerClose">关闭</span>
        </div>
        <div class="tm_body">
          <!-- <span class="tm_body_content">这是一段信息</span> -->
          <slot></slot>
        </div>
        <div class="tm_footer" v-if="$slots.footer">
          <slot name="footer"> </slot>
        </div>
      </div></div
  ></transition>
</template>

<script>
export default {
  data() {
    return {
      top1: 0,
    };
  },
  props: {
    title: {
      type: String,
      default: "提示",
    },
    width: {
      type: String,
      default: "330px",
    },
    top: {
      type: String,
      default: "50%",
    },
    visible: {
      type: Boolean,
      default:false
    },
  },
  watch: {
    top: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.indexOf("%") > -1) {
          this.top1 = val;
          console.log(this.top1);
        } else if (val.indexOf("px") > 1) {
          this.top1 = -(this.top1 - 0);
        }
      },
    },
  },
  methods: {
    handerClose() {
      this.$emit("handerClose", false);
    },
  },
  mounted() {
    console.log(this.$slots.footer);
  },
};
</script>

<style lang="scss" scoped>
.tm-dialog_wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .tm-dialog {
    position: absolute;
    // top: 50%;
    left: 50%;

    background-color: #fff;
    // width: 330px;

    border-radius: 8px;
    padding-bottom: 16px;
    .tm-dialog_header {
      padding: 13px 15px 10px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 18px;
      }
      .tm_title {
      }
      .tm_close {
        color: red;
        font-size: 15px;
      }
    }
    .tm_body {
      font-size: 14px;
      padding: 20px 15px 15px;
    }
    .tm_footer {
      display: flex;
      justify-content: flex-end;
      margin: 18px 0 0px;
      padding: 0 15px;
      /deep/.tm-button {
        margin-right: 0;
        margin-left: 15px;
      }
    }
  }
}

.fade-enter-active{
    animation: fade .3s ease;
}
.fade-leave-active{
    animation: fade .2s ease reverse;
}

@keyframes fade{
    0%{
        opacity: 0;
        transform: translateY(-20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px)
    }
}
</style>

